<template>
  <div class="phone_bottom">
    <van-tabbar :fixed="false" v-if="footerList && footerList.length > 0">
      <van-tabbar-item
        :icon="footer.piclink"
        v-for="(footer, i) in footerList"
        :key="i"
        >{{ footer.title }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Tabbar, TabbarItem } from "vant";
export default {
  data() {
    return {};
  },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
  computed: {
    ...mapState({
      footerList: state => state.modulePage.moduledata.footer
    })
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="less">
.phone_bottom {
  width: 100%;
  background-color: white;
  height: 50px;
  position: relative;
  > div {
    width: 100%;
  }
}

.phone_bottom_box {
  display: flex;
  height: 100%;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
}
.phone_bottom_item {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 100%;
}

.phone_bottom_item_img {
  width: 25px;
}
.phone_bottom_item_img img {
  width: 100%;
}
.phone_bottom_item p {
  font-size: 12px;
  color: #7c7e82;
}
</style>
